<!DOCTYPE html>
<html lang="en">

<head>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>

    <!-- Favicons -->
    

    <!-- Vendor CSS (Icon Font) -->

    <link rel="stylesheet" href="front/css/fontawesome.min.css">
    <link rel="stylesheet" href="front/css/pe-icon-7-stroke.min.css">


    <!-- Plugins CSS (All Plugins Files) -->


    <link rel="stylesheet" href="front/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="front/css/animate.min.css">
    <link rel="stylesheet" href="front/css/lightgallery.min.css">
    <link rel="stylesheet" href="front/css/aos.min.css">
    <link rel="stylesheet" href="front/css/nice-select.min.css">


    <!-- Main Style CSS -->
    <link rel="stylesheet" href="front/css/style.css">


    <!-- Use the minified version files listed below for better performance and remove the files listed above -->

    <!--
<link rel="stylesheet" href="assets/css/vendor/vendor.min.css">
<link rel="stylesheet" href="assets/css/plugins/plugins.min.css">
<link rel="stylesheet" href="assets/css/style.min.css"> 
-->

<style>
    .comment-item {
        margin-bottom: 20px; /* 添加间距 */
        display: block; /* 确保块级显示 */
    }
</style>
</head>

<body>


<div class="header section">

    <!-- Header Top Start -->
    <div class="header-top bg-primary">
        <div class="container">
            <div class="row align-items-center">

                <!-- Header Top Message Start -->
                <div class="col-12">
                    <div class="header-top-msg-wrapper text-center">
                        <p class="header-top-message text-center">最高50%折扣 <strong>冬季</strong> 系列 <a href="page/shoppage" class="btn btn-hover-dark btn-secondary">立即购买</a></p>
                        <div class="header-top-close-btn">
                            <button class="top-close-btn"><i class="pe-7s-close"></i></button>
                        </div>
                    </div>
                </div>
                <!-- Header Top Message End -->
            </div>
        </div>
    </div>
    <!-- Header Top End -->

    <!-- Header Bottom Start -->
    <div class="header-bottom">
        <div class="header-sticky">
            <div class="container">
                <div class="row align-items-center position-relative">

                    <!-- Header Logo Start -->
                    <div class="col-md-6 col-lg-3 col-xl-2 col-6">
                        <div class="header-logo">
                            <a href="page/shoppage"><img src="front/picture/logo.png" alt="Site Logo"></a>
                        </div>
                    </div>
                    <!-- Header Logo End -->

                    <!-- Header Menu Start -->
                    <div class="col-lg-6 d-none d-lg-block">

                        <div class="main-menu">
                            <ul>
                                <li class="has-children">
                                    <a href="page/index">首页</a>
                                </li>
                                <li class="has-children position-static">
                                    <a href="page/shoppage">购物</a>
                                </li>
                                <li><a href="page/about">关于我们</a></li>
                                <li><a href="page/contact">联系我们</a></li>
                            </ul>
                        </div>

                    </div>
                    <!-- Header Menu End -->

                    <!-- Header Action Start -->
                    <div class="col-md-6 col-lg-3 col-xl-4 col-6 justify-content-end">
                        <div class="header-actions">
                            <div class="dropdown-user d-none d-lg-block">
                                <a href="page/account" class="header-action-btn"><i class="pe-7s-user"></i></a>
                            </div>
                            <a href="page/wishlist" class="header-action-btn header-action-btn-wishlist">
                                <i class="pe-7s-like"></i>
                            </a>
                            <a href="page/cart" class="header-action-btn header-action-btn-cart">
                                <i class="pe-7s-cart"></i>
                            </a>
                            <!-- Mobile Menu Hambarger Action Button Start -->
                            <a href="javascript:void(0)" class="header-action-btn header-action-btn-menu d-lg-none d-md-block">
                                <i class="fa fa-bars"></i>
                            </a>
                            <!-- Mobile Menu Hambarger Action Button End -->

                        </div>
                    </div>
                    <!-- Header Action End -->

                </div>
            </div>
        </div>
    </div>
    <!-- Header Bottom End -->

    <!-- Offcanvas Search Start -->
    <div class="offcanvas-search">
        <div class="offcanvas-search-inner">

            <!-- Button Close Start -->
            <div class="offcanvas-btn-close">
                <i class="pe-7s-close"></i>
            </div>
            <!-- Button Close End -->

            <!-- Offcanvas Search Form Start -->
            <form class="offcanvas-search-form" action="#">
                <input type="text" placeholder="Search Product..." class="offcanvas-search-input">
            </form>
            <!-- Offcanvas Search Form End -->

        </div>
    </div>
    <!-- Offcanvas Search End -->

</div>
<!-- Header Section End -->


    <!-- Breadcrumb Section Start -->
    <div class="section">

        <!-- Breadcrumb Area Start -->
        <div class="breadcrumb-area bg-primary">
            <div class="container">
                <div class="breadcrumb-content">
                    <ul>
                        <li>
                            <a href="page/index"><i class="fa fa-home"></i> </a>
                        </li>
                        <li class="active"> 商品详情 页面</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- Breadcrumb Area End -->

    </div>
    <!-- Breadcrumb Section End -->

    <!-- Single Product Section Start -->
    <div class="section section-margin-top">
        <div class="container">

            <div class="row">
                <div class="col-lg-5 offset-lg-0 col-md-8 offset-md-2">

                    <!-- Product Details Image Start -->
                    <div class="product-details-img">

                        <!-- Single Product Image Start -->
                        <div class="single-product-img swiper-container product-gallery-top">
                            <div class="swiper-wrapper popup-gallery">
                                <a class="swiper-slide w-100" href="front/picture/110.jpg">
                                    <img class="w-100" src="front/picture/110.jpg" alt="Product" style="width: 438px; height: 530px;object-fit: cover;">
                                </a>

                            </div>
                        </div>
                        <!-- Single Product Image End -->



                    </div>
                    <!-- Product Details Image End -->

                </div>
                <div class="col-lg-7">

                    <!-- Product Summery Start -->
                    <div class="product-summery position-relative">

                        <!-- Product Head Start -->
                        <div class="product-head mb-3">
                            <h2 id="productname" class="product-title">Sample product title</h2>
                        </div>
                        <!-- Product Head End -->

                        <p id="productsubtitle" class="desc-content mb-5">productsubtitleeee</p>

                        <!-- Price Box Start -->
                        <div class="price-box mb-2">
                            <span class="regular-price">$80.00</span>
                            <span class="old-price"><del>$90.00</del></span>
                        </div>
                        <!-- Price Box End -->



                        <!-- Description Start -->
                        <p id="productinfo" class="desc-content mb-5">I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.</p>
                        <!-- Description End -->



                        <!-- Quantity Start -->
                        <div class="quantity d-flex align-items-center mb-5">
                            <span class="me-2"><strong>数量: </strong></span>
                            <div class="cart-plus-minus">
                                <input class="cart-plus-minus-box" value="1" type="text">
                                <div class="dec qtybutton">-</div>
                                <div class="inc qtybutton">+</div>
                            </div>
                        </div>
                        <!-- Quantity End -->

                        <!-- Cart Button Start -->
                        <div class="cart-btn mb-4">
                            <div class="add-to_cart">
                                <a class="btn btn-dark btn-hover-primary addtocart">添加到购物车</a>
                            </div>
                        </div>
                        <!-- Cart Button End -->

                        <!-- Action Button Start -->
                        <div class="actions border-bottom mb-4 pb-4">
                            <a title="Wishlist" class="action wishlist"><i class="pe-7s-like"></i> 收藏</a>
                        </div>
                        <!-- Action Button End -->

                        <!-- Social Shear Start -->
                        <div class="social-share">
                            <span><strong>分享: </strong></span>
                            <a href="https://zh-cn.facebook.com/login" class="facebook-color"><i class="fa fa-facebook"></i> Like</a>
                            <a href="https://www.twitter.com" class="twitter-color"><i class="fa fa-twitter"></i> Tweet</a>
                            <a href="https://www.pinterest.com/" class="pinterest-color"><i class="fa fa-pinterest"></i> Save</a>
                        </div>
                        <!-- Social Shear End -->

                        <!-- Payment Option Start -->
                        <div class="payment-option mt-4 d-flex">
                            <span><strong>支付: </strong></span>
                            <a>
                                <img class="fit-image ms-1" src="front/picture/payment.png" alt="Payment Option Image">
                            </a>
                        </div>
                        <!-- Payment Option End -->

                        <!-- Product Delivery Policy Start -->
                        <ul class="product-delivery-policy border-top pt-4 mt-4 border-bottom pb-4">
                            <li> <i class="fa fa-check-square"></i> <span>安全政策：假一赔十</span></li>
                            <li><i class="fa fa-truck"></i><span>运送政策：承诺24小时内发货</span></li>
                            <li><i class="fa fa-refresh"></i><span>退货政策：七天无理由退货</span></li>
                        </ul>
                        <!-- Product Delivery Policy End -->

                    </div>
                    <!-- Product Summery End -->

                </div>
            </div>

            <div class="row section-margin">
                <!-- Single Product Tab Start -->
                <div class="col-lg-12 single-product-tab">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">

                        <li class="nav-item">
                            <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#connect-2" role="tab" aria-selected="true">评论</a>
                        </li>

                    </ul>
                    <div class="tab-content mb-text" id="myTabContent">

                        <div class="tab-pane fade show active" id="connect-2" role="tabpanel" aria-labelledby="profile-tab">
                            <!-- Start Single Content -->
                            <div class="product_tab_content border p-3">
                                <!-- Start Single Review -->
                                <div id="commentlist">





                                </div>
                                <!-- End Single Review -->

                                <!-- Rating Wrap Start -->
                                <div class="rating_wrap">
                                    <h5 class="rating-title mb-2">添加一条评论 </h5>

                                </div>
                                <!-- Rating Wrap End -->

                                <!-- Comments ans Replay Start -->
                                <div class="comments-area comments-reply-area">
                                    <div class="row">
                                        <div class="col-lg-12 col-custom">

                                            <!-- Comment form Start -->
                                            <form action="#" class="comment-form-area">

                                                <!-- Comment Texarea Start -->
                                                <div class="comment-form-comment mb-3">
                                                    <label>评论</label>
                                                    <textarea class="comment-notes" required="required"></textarea>
                                                </div>
                                                <!-- Comment Texarea End -->

                                                <!-- Comment Submit Button Start -->
                                                <div class="comment-form-submit">
                                                    <button id="commentsubmit" type="button" class="btn btn-dark btn-hover-primary">提交</button>
                                                </div>
                                                <!-- Comment Submit Button End -->

                                            </form>
                                            <!-- Comment form End -->

                                        </div>
                                    </div>
                                </div>
                                <!-- Comments ans Replay End -->

                            </div>
                            <!-- End Single Content -->
                        </div>

                    </div>
                </div>
                <!-- Single Product Tab End -->
            </div>

        </div>
    </div>
    <!-- Single Product Section End -->



    <!-- Footer Section Start -->
    <footer class="section footer-section">
        <!-- Footer Top Start -->
        <div class="footer-top bg-primary section-padding">
            <div class="container">
                <div class="row mb-n8">
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h1 class="widget-title">About Us</h1>
                            <p class="desc-content">We are a team of designers and developers that create high quality wordpress, shopify, Opencart</p>
                            <!-- Soclial Link Start -->
                            <div class="widget-social justify-content-start mb-n2">
                                <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                                <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                                <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                                <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                                <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                            </div>
                            <!-- Social Link End -->
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Contact Us</h2>
                            <ul class="contact-links">
                                <li><i class="pe-7s-home"></i> <span>Your address goes here</span> </li>
                                <li><i class="pe-7s-mail"></i><a href="mailto:info@example.com"> info@example.com</a></li>
                                <li><i class="pe-7s-call"></i><a href="tel:+012-3456-789"> +012 3456 789</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget aos-init aos-animate">
                            <h2 class="widget-title">Information</h2>
                            <ul class="widget-list">
                                <li><a href="contact.html">Terms & Conditions</a></li>
                                <li><a href="contact.html">Payment Methode</a></li>
                                <li><a href="contact.html">Product Warranty</a></li>
                                <li><a href="contact.html">Return Process</a></li>
                                <li><a href="contact.html">Payment Security</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3 mb-8">
                        <div class="single-footer-widget">
                            <h2 class="widget-title">Signup for newsletter</h2>
                            <div class="widget-body">
                                <!-- Newsletter Form Start -->
                                <div class="newsletter-form-wrap pt-1">
                                    <form id="mc-form" class="mc-form">
                                        <input type="email" id="mc-email" class="form-control email-box mb-4" placeholder="demo@example.com" name="EMAIL">
                                        <button id="mc-submit" class="newsletter-btn" type="submit">Subscribe</button>
                                    </form>
                                    <!-- mailchimp-alerts Start -->
                                    <div class="mailchimp-alerts text-centre">
                                        <div class="mailchimp-submitting"></div><!-- mailchimp-submitting end -->
                                        <div class="mailchimp-success text-success"></div><!-- mailchimp-success end -->
                                        <div class="mailchimp-error text-danger"></div><!-- mailchimp-error end -->
                                    </div>
                                    <!-- mailchimp-alerts end -->
                                </div>
                                <!-- Newsletter Form End -->
                                <p class="desc-content mb-0">Join over 1,000 people who get free and fresh content delivered automatically each time we publish</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Top End -->

        <!-- Footer Bottom Start -->
        <div class="footer-bottom bg-secondary pt-4 pb-4">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 text-center">
                        <div class="copyright-content">
                            <p class="mb-0">Copyright &copy; 2023.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer Bottom End -->
    </footer>
    <!-- Footer Section End -->




    <!-- Scripts -->
    <script src="layui/layui.all.js"></script>
    <script type="text/html" id="commentitem">
        <div class="single-review d-flex mb-4" >
        <!-- Review Thumb Start -->
        <div class="review_thumb">
            <img style="width: 80px;height: 80px;" src="front/picture/morentouxiang.png">
        </div>
        <!-- Review Thumb End -->

        <!-- Review Details Start -->
        <div class="review_details">
            <div class="review_info mb-2">

                <!-- Rating Start -->

                <!-- Rating End -->

                <!-- Review Title & Date Start -->
                <div class="review-title-date d-flex">
                    <h5 class="title username">Admin - </h5><span class="createtime"> January 19, 2021</span>
                    <button class="deletecomment" style="display: none;">删除</button>
                    <input type="hidden" value="commentid">
                </div>
                <!-- Review Title & Date End -->

            </div>
            <p class="content">Lorem ipsum dolor sit amet</p>
        </div>
        <!-- Review Details End -->
        </div>
    </script>
    <script>
        const $ = layui.$;
        //从URL中获取商品ID
        const urlParams = new URLSearchParams(window.location.search);
        const productId = Number(urlParams.get('proid'));

        $.ajax({
            url: '/page/productData',
            method: 'GET',
            data: { proid: productId },
            success: function(product) {

                $('#productname').text(product.name);
                $('#productsubtitle').text(product.subtitle);
                $('.regular-price').text('$' + product.price);
                $('.old-price').text('$' + product.oldprice);
                $('#productinfo').text(product.info);
                $('.first-img').attr('src', product.defaultimage);
                $('.w-100').attr('src', product.defaultimage);
            },
            error: function(xhr, status, error) {
                // 处理错误（例如商品不存在）
                $('.product-title').text('加载失败');
                $('.desc-content').text('商品信息获取失败，请稍后重试。');
                console.error('API请求失败:', error);
            }
        });

        $(document).ready(function() {
            //监听加入购物车
            $(document).on('click','.addtocart',function() {
                const quantity=$('.cart-plus-minus-box').val();
                $.ajax({
                    url:'cart/get',
                    success:function(result){
                        console.log(result);
                        if(result.code==401){
                            location.href='page/login';
                        }else if(result.length===0||!result.some(cart=>cart.proid===productId)){
                            $.ajax({
                                url: 'cart/add',
                                data: {proid: productId, quantity:quantity},
                                success: function() {
                                    layer.msg("添加成功!");
                                }
                            });
                        }else{
                            $.ajax({
                                url: 'cart/edit',
                                data: {proid:productId,quantity:quantity},
                                success: function() {
                                    layer.msg("更新成功!");
                                }
                            });
                        }
                    }
                });
            });
            //加入收藏按钮绑定
            $(document).on('click','.action.wishlist',function(){
                $.ajax({
                    url:'collect/get',
                    success:function(result){
                        console.log(result);
                        if(result.code==401){
                            location.href='page/login';
                        }
                        else if(result.length===0||!result.some(collect=>collect.proid===productId)){
                            $.ajax({
                                url: 'collect/add',
                                data: {proid:productId},
                                success: function() {
                                    layer.msg("收藏成功!");
                                }
                            });
                        }else{
                            layer.msg("该商品已收藏!")
                        }
                    },
                    error:function(){
                        console.error('发生错误:',error);

                    }
                });
            });
        });

        //生成评论
        loadcomment();
        function loadcomment(){
            $('#commentlist').empty();
            $.ajax({
                url:'comment/get',
                data:{proid:productId},
                async:false,
                success:function(result){
                    result.forEach(item => {
                        let $newRow = $('#commentitem').html()
                            .replace('front/picture/morentouxiang.png',item.user.headpicture?item.user.headpicture:'front/picture/morentouxiang.png')
                            .replace('Admin - ', item.user.username+' - ')
                            .replace('January 19, 2021', item.createtime.substring(0, 10))
                            .replace('Lorem ipsum dolor sit amet',item.content)
                            .replace('value="commentid"','value="'+item.id+'"')
                        $.ajax({
                            url:'comment/verifycomment',
                            data:{userid:item.userid},
                            async:false,
                            success:function(res){
                                if(res){
                                    console.log(1);
                                    $newRow=$newRow.replace('<button class="deletecomment" style="display: none;">删除</button>', '<button class="deletecomment" >删除</button>');
                                }
                            }
                        });
                        $('#commentlist').append($newRow);
                    });
                }
            });
        }
        //评论删除按钮
        $('.deletecomment').on('click',function(){

            var commentId = $(this).next('input[type="hidden"]').val();
            console.log(commentId);
            $.ajax({
                url:'comment/delete',
                data:{id:commentId},
                success:function(){
                    layer.msg("删除成功!");
                    loadcomment();
                }
            });
        });
        //提交按钮
        $(document).on('click','#commentsubmit',function(){
            if($('textarea').val().trim()==''){
                layer.msg("请先编辑评论！");
                return;
            }
            $.ajax({
                url:'comment/add',
                data:{proid:productId,content:$('textarea').val().trim(),status:2},
                success: function(result) {
                    if(result.code==401){
                        location.href='page/login';
                    }else{
                        layer.msg("评论成功!");
                        loadcomment();
                        location.reload();
                    }
                }
            });
        });
        //加减按钮
        $(document).on('click','.qtybutton',function(){
            const $input = $(this).siblings('.cart-plus-minus-box');
            let val = parseInt($input.val()) || 1;
            if($(this).hasClass('inc')){
                val++;
            }else{
                val--;
                val=Math.max(val,1);
            }
            $input.val(val);
            const proId=$(this).closest('tr').find('.proid').val();
            $.ajax({
                url:'cart/edit',
                data:{proid:proId,quantity:val},
                async:false,
                success:function(){}
            });
        });
    </script>
    <!-- Global Vendor, plugins JS -->

    <!-- Vendor JS -->


    <script src="front/js/popper.min.js"></script>
    <script src="front/js/bootstrap.min.js"></script>
    <script src="front/js/jquery-3.6.0.min.js"></script>
    <script src="front/js/jquery-migrate-3.3.2.min.js"></script>
    <script src="front/js/modernizr-3.11.2.min.js"></script>



    <!-- Plugins JS -->


    <script src="front/js/aos.min.js"></script>
    <script src="front/js/jquery.ajaxchimp.min.js"></script>
    <script src="front/js/jquery-ui.min.js"></script>
    <script src="front/js/nice-select.min.js"></script>
    <script src="front/js/swiper-bundle.min.js"></script>
    <script src="front/js/countdown.min.js"></script>
    <script src="front/js/lightgallery-all.min.js"></script>



    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <!-- 
    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script> 
    -->

    <!--Main JS-->
    <script src="front/js/main.js"></script>
</body>

</html>